<template>
	<coreshop-page title="支付结果" mode="left">
		<view class="layout-result-box">
			<view class="item-box" v-if="state.status && state.paymentInfo?.status === OrderPayStatusEnum.yes">
				<view class="icon">
					<uv-icon name="checkmark-circle-fill" color="#D33123" size="90"></uv-icon>
				</view>
				<view class="title">支付成功</view>
				<view class="price">￥{{ state.paymentInfo?.money || '' }}</view>
				<view class="desc">
					平台已收到您的钱款，已通知卖家发货。平台会及时通知您的交易状态，请您关注。
				</view>
				<view class="btn" @click="goOrderDetail()">查看详情</view>
			</view>
			<view class="item-box" v-if="state.status && state.paymentInfo?.status === OrderPayStatusEnum.no">
				<view class="icon">
					<uv-icon name="close-circle-fill" color="#D33123" size="80"></uv-icon>
				</view>
				<view class="title">支付失败</view>
				<view class="desc"> 因为某些问题导致支付失败，请查看详情了解具体问题 </view>
				<view class="btn" @click="goOrderDetail()">查看详情</view>
			</view>
		</view>
	</coreshop-page>
</template>
<script setup lang="ts">
	import { reactive } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';
	import { queryPaymentInfo } from '@/core/api';
	import type { Response } from '@/core/models';
	import { PaymentTypeEnum, OrderPayStatusEnum } from '@/core/enum';
	import { handleShowToast, handleRouteRedirectTo, handleRouteSwitchTab } from '@/core/utils';

	interface QueryParams {
		id ?: string;    /** 支付id */
		orderId ?: string; /** 订单id */
	}

	const state = reactive<{
		paymentId : string;
		orderId : string;
		paymentInfo : any;
		status : boolean,
	}>({
		paymentId: "",
		orderId: "",
		paymentInfo: {},
		status: false
	})

	onLoad(async (query : QueryParams) => {
		state.paymentId = query?.id;
		state.orderId = query?.orderId;
		getPayResult();
	});

	/** 获取支付结果 */
	const getPayResult = () => {
		let time : any = '';
		let num : number = 0;
		uni.showLoading({
			title: '获取支付结果中'
		});
		time = setInterval(() => {
			num++;
			if (num == 5 || state.paymentInfo?.status == 2) {
				clearInterval(time);
				setTimeout(() => {
					uni.hideLoading();
				}, 500);
				return;
			}
			getPaymentInfo();
		}, 3000)
	}

	/** 获取支付信息 */
	const getPaymentInfo = async () => {
		if (!state.paymentId) {
			state.status = true;
			state.paymentInfo.money = '0.00';
			state.paymentInfo.status = 2;
			state.paymentInfo.type = 1;
			uni.hideLoading();
			return;
		}
		const paymentInfo : Response<any> = await queryPaymentInfo({ id: state.paymentId });
		uni.hideLoading();
		if (paymentInfo.status) {
			state.status = true;
			state.paymentInfo = paymentInfo.data;
			state.orderId = paymentInfo.data.sourceId;
		} else {
			handleShowToast(paymentInfo.msg)
		}
	}

	/** 判断是商品订单 */
	const isGoodsOrder = () => {
		return (
			state.paymentInfo.type === PaymentTypeEnum.common ||
			state.paymentInfo.type === PaymentTypeEnum.pinTuan ||
			state.paymentInfo.type === PaymentTypeEnum.group ||
			state.paymentInfo.type === PaymentTypeEnum.seckill ||
			state.paymentInfo.type === PaymentTypeEnum.bargain ||
			state.paymentInfo.type === PaymentTypeEnum.giveaway ||
			state.paymentInfo.type === PaymentTypeEnum.solitaire ||
			state.paymentInfo.type === PaymentTypeEnum.transactionComponent
		)
	}

	/** 去订单详情 */
	const goOrderDetail = () => {
		if (state.orderId && isGoodsOrder()) {
			handleRouteRedirectTo(`/pages/subpackage/member/order/detail/detail?orderId=${state.orderId}`);
		} else if (state.paymentInfo.type === PaymentTypeEnum.recharge) {
			handleRouteRedirectTo(`/pages/subpackage/member/balance/detail/detail`);
		} else if (state.paymentInfo.type === PaymentTypeEnum.formPay || state.paymentInfo.type === PaymentTypeEnum.formOrder) {
			handleRouteSwitchTab()
		} else if (state.paymentInfo.type === PaymentTypeEnum.serviceOrder) {
			handleRouteRedirectTo(`/pages/subpackage/member/serviceOrder/list/list`);
		}
	}
</script>
<style lang="scss" scoped>
	@import './result.scss';
</style>